<template>
  <div>
    <!-- <h3>用户列表</h3> -->

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- :gutter="20" 间隔 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="餐厅名" value="1"></el-option>
              <el-option label="订单号" value="2"></el-option>
              <el-option label="用户电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"   @click="dialogFormVisible = true" >添加用户</el-button>
        </el-col>

         <el-col :span="8"> 
          <el-button @click="toggleSelection([userlist[1], userlist[2]])">切换第二、第三行的选中状态</el-button>
          <el-button type="primary"   @click="toggleSelection()" >取消选择</el-button>
          <el-button type="primary"   @click="getSelection()" >获取选中的列</el-button>
        </el-col>
      </el-row>

      <hr class="hr-class" />

      <el-table  ref="multipleTable" :data="userlist" height="600px" border style="width: 100%"
       @row-click="clickRow"
       @selection-change="selectionLineChangeHandle"
       	>


        <el-table-column type="index" label="序号" width="60">  </el-table-column>
        <el-table-column type="selection"   width="55"> </el-table-column>
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="flag" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.flag" @change="changeUserStatus(scope.row)"   active-color="#13ce66"  inactive-color="#ff4949"  >  </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button type="danger"  icon="el-icon-edit"   size="mini"  ></el-button>
            <el-button type="danger"  icon="el-icon-delete"   size="mini"  ></el-button>
            <el-tooltip class="item"  effect="dark"  content="设置角色"   placement="top-start" :enterable="false" >
              <el-button type="success"  icon="el-icon-setting"  size="mini" ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

<!-- 分页 -->
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageCount"
      :page-sizes="pageSizes"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>




    </el-card>



<!-- 添加用户的对话框 -->
    <el-dialog  title="添加用户" :visible.sync="dialogFormVisible" @close="addDialogClose('addForm')" >
  <el-form :model="addForm"  ref="addForm" :rules="formRules" >
    <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
      <el-input v-model="addForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email"  :label-width="formLabelWidth">
      <el-input v-model="addForm.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="address"  :label-width="formLabelWidth">
      <el-input v-model="addForm.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
      <el-select v-model="addForm.status" placeholder="请选择">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddUser('addForm')">确 定</el-button>
  </div>
</el-dialog>



  </div>
</template>


<script>
export default {
  created() {
    this.getUserList()
  },
  data() {
        //自定义邮箱地址校验规则
      var checkEmail =  (rule, value, callback) => {
      const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (regEmail.test(value)) {
        return callback();
      }else{
          return callback(new Error('邮箱格式不正确'));
      }
    };


    return {
      queryInfo: {
        id: '',
        name: '',
        address: '',
        pageCount: 1,
        pageSize: 10,
      },
      pageSizes:[10,20,30,40,50],
      totalCount: 0,
      userlist: [],
      dataonLineListSelections: [],//选中列的修改
      input3: '',
      select: '',
      
      dialogTableVisible: false,//添加用户对话框
      dialogFormVisible: false,//添加用户对话框
      formLabelWidth: '120px',
      addForm:{
        name:'',
        address:'',
        status:'',
        email:''
      },

      formRules:{
          name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ]
          ,address: [
            { required: true, message: '地址不能为空', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ]
          ,status: [
            { required: true, message: '状态不能为空' },
          ]
          ,email:[
            {required: true, message: '邮箱不能为空',trigger:"blur"}//自定义校验规则
            , { validator: checkEmail, trigger: 'blur' }
          ]

        }


    }
  },
  methods: {
    async getUserList() {
      const datas = await this.$http.get('/users/page', {
        params: this.queryInfo,
      })
      this.userlist = datas.data.list
      this.totalCount = datas.data.total
      this.queryInfo.pageCount = datas.data.pageNum;
      this.queryInfo.pageSize =  datas.data.pageSize;
      console.log(this.userlist)
      console.log(this.totalCount)
    },
     handleSizeChange(val) {//切换条数
        console.log(`每页 ${val} 条`);
        this.queryInfo.pageSize = val;
        this.getUserList();
      },
      handleCurrentChange(val) {//切换页数
        console.log(`当前页: ${val}`);
        this.queryInfo.pageCount = val;
        this.getUserList();
      },
      clickRow(row, column, event){// 单击行
          this.$message({  message: '点击了行',  type: 'success'  });
          console.log(row.id);
          console.log(column);
          console.log(event);
          console.log("----------------------");
      },
selectionLineChangeHandle (val) {//选中的列
       this.dataonLineListSelections = val
},

 toggleSelection(rows) {//取消全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      getSelection(){//获取选中的列
        console.log(this.dataonLineListSelections);
          for(var i = 0; i< this.dataonLineListSelections.length; i++){
                console.log('id:'+this.dataonLineListSelections[i].id)
              }
      },

      addDialogClose(formName){//添加用户的窗口关闭事件
        this.$refs[formName].resetFields();
      },

      changeUserStatus(data){//修改用户状态
          this.$message({  message: '修改用户状态成功 id：'+data.id + "，status: " + data.status,  type: 'success'  });
      },

      doAddUser(formName){//添加用户
           // 为表单绑定验证功能
        this.$refs[formName].validate( (valid) => { // 异步请求
          if (valid) {  // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
              alert(this.addForm.name+"--"+this.addForm.address+"--"+this.addForm.status+"--"+this.addForm.email);
          } 
        });
      }
      

  },
}
</script>

<style lang="less" scoped>
.hr-class {
  border: grey;
}

.box-card {
  width: 100%;
  height: 750px;
  margin-top: 30px;
}
</style>


 